<script lang="jsx" setup>
import { ref } from 'vue';
import dayjs from 'dayjs';

const props = defineProps({
  rowData: {
    type: Object,
    default: () => null
  }
});

const formRef = ref(null);
const formModel = ref(getModel());

function getModel() {
  if (props.rowData) {
    return props.rowData;
  }
  return {
    model: null,
    position: null,
    category: null,
    printCount: null,
    notes: null
  };
}

const formList = [
  {
    label: '型号',
    key: 'model',
    span: 24,
    type: 'input',
    placeholder: '请输入型号'
  },
  {
    label: '存放位置',
    key: 'position',
    span: 24,
    type: 'input',
    placeholder: '请输入存放位置'
  },
  {
    label: '类别',
    key: 'category',
    span: 24,
    type: 'input',
    placeholder: '请输入类别'
  },
  {
    label: '印次',
    key: 'printCount',
    span: 24,
    type: 'input',
    placeholder: '请输入印次'
  },
  {
    label: '备注',
    key: 'notes',
    span: 24,
    type: 'textarea',
    placeholder: '请输入备注'
  }
];

async function validateForm() {
  await formRef.value.validateForm();
}

defineExpose({
  model: formModel.value,
  validateForm
});
</script>

<template>
  <div class="h-full w-full">
    <Form ref="formRef" v-model:model="formModel" :form-list="formList"></Form>
  </div>
</template>

<style lang="scss" scoped></style>
